<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		
	</head>
	<body>
		<h1>vue入门案例</h1>
		
		<div id="app">
			<h3>{{msg}}</h3>
			<h3>获取数字：{{number}}</h3>
			<button @click="addnum">点击自增</button>
			<button @click="destroy">销毁</button>
		</div>
		
		<script>
			const app =new Vue({
				el: "#app",
				data:{
					msg: "你好vue js",
					number:100
				},
				beforeCreate() {
					console.log('beforeCreate')
				},
				created() {
					console.log('created')
				},
				beforeMount() {
					console.log('beforemount')
				},
				beforeUpdate() {
					console.log('beforeUpdate')
				},
				updated() {
					console.log('updated')
				},
				beforeDestroy() {
					console.log('beforedestroy')
				},
				destroyed() {
					console.log('destroyed')
				},
				methods:{
					destroy(){
						this.$destroy()
					},
					addnum(){
						this.number++
					}
				}
			})
		</script>
		
	</body>
</html>
